<template>
  <div>
    <button @click="flag = C1">c1组件</button>
    <button @click="flag = C2">c2组件</button>

    <!-- <c1 v-if="flag === 'c1'"></c1> -->
    <!-- <c2 v-if="flag === 'c2'"></c2> -->
    <!-- flag：组件变量 -->
    <component :is="flag"></component>
  </div>
</template>

<script setup>
import { shallowRef } from "vue";
import C1 from "./c1.vue";
import C2 from "./c2.vue";

const flag = shallowRef(C1);
</script>

<style scoped></style>
